<template>
    <!-- 概览统计 -->
    <el-row>
        <el-col :span="6">
        <el-statistic :value="summaryData.effectiveActivityCount">
            <template #title>
            <div style="display: inline-flex; align-items: center">
                市场活动
            </div>
            </template>
            <template #suffix>/{{ summaryData.totalActivityCount }}</template>
        </el-statistic>
        </el-col>
        <el-col :span="6">
        <el-statistic title="线索总数" :value="summaryData.totalClueCount" />
        </el-col>
        <el-col :span="6">
        <el-statistic title="客户总数" :value="summaryData.totalCustomerCount" />
        </el-col>
        <el-col :span="6">
        <el-statistic :value="summaryData.successTranAmount">
            <template #title>
            <div style="display: inline-flex; align-items: center">
                交易总额
            </div>
            </template>
            <template #suffix>/{{ summaryData.totalTranAmount }}</template>
        </el-statistic>
        </el-col>
    </el-row>
    <!-- 销售漏斗图 -->
    <div id="saleFunnelChart" style="width: 48%; height:350px; margin:10px; float: left;"></div>
    <!-- 线索来源饼图 -->
    <div id="sourcePieChart" style="width: 48%; height:350px; margin:10px; float: left;"></div>
</template>

<script>
import { doGet } from '../http/httpRequest';
import { messageTip } from '../util/util';
import * as echarts from 'echarts';
export default {
    name : "StatisticView",
    mounted(){
        this.loadSummary();
        this.loadSaleFunnel();
        this.loadSourcePieChart();
    },
    data(){
        return {
            summaryData : {}
        }
    },
    methods : {
        loadSummary(){
            doGet("/api/summary/data",{}).then(resp => {
                if(resp.data.code === 200){
                    this.summaryData = resp.data.data;
                }
                else{
                    messageTip("网络异常","error");
                }
            });
        },
        loadSourcePieChart(){
            // 查询数据先
            doGet("/api/summary/sourcePie",{}).then(resp => {
                if(resp.data.code === 200){
                    let sourcePieData = resp.data.data;
                    // 获取了绑定用的Dom
                    var chartDom = document.getElementById('sourcePieChart');
                    // 使用组件对dom进行初始化
                    var myChart = echarts.init(chartDom);
                    // 配置可选项
                    let option = {
                        title: {
                            text: '线索来源统计',
                            left: 'center',
                            top: 'bottom'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        // 图例
                        legend: {
                            orient: 'horizontal',
                            left: 'center'
                        },
                        // 系列
                        series: [
                            {
                                name: '线索来源统计',
                                type: 'pie',
                                // 图的半径
                                radius: '60%',
                                data: sourcePieData,
                                emphasis: {
                                    itemStyle: {
                                        // 图形阴影模糊大小
                                        shadowBlur: 10,
                                        // 阴影水平方向上的偏移距离
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 把配置好的可选项设置到我们的图表中
                    option && myChart.setOption(option);
                }
                else{
                    messageTip("网络异常","error");
                }
            });
        },
        loadSaleFunnel(){
            // 先查询数据
            doGet("/api/summary/saleFunnel",{}).then(resp => {
                if(resp.data.code === 200){
                    let saleFunnelData = resp.data.data;
                    // 获取了绑定用的Dom
                    var chartDom = document.getElementById('saleFunnelChart');
                    // 使用组件对dom进行初始化
                    var myChart = echarts.init(chartDom);
                    // 配置可选项
                    var option = {
                        title: {
                            // 主标题文本,支持换行
                            text: '销售漏斗图',
                            left: 'center',
                            top: 'bottom'
                        },
                        // 提示框组件
                        tooltip: {
                            // 鼠标放上去触发
                            trigger: 'item',
                            // 提示框浮层内容格式化器
                            formatter: '{a} <br/>{b} : {c}'
                        },
                        // 配置工具栏
                        toolbox: {
                            feature: {
                                // 是否不可编辑
                                dataView: { readOnly: true },
                                // 配置项还原
                                restore: {},
                                // 保存为图片
                                saveAsImage: {}
                            }
                        },
                        // 图例组件
                        legend: {
                            data: ['线索', '客户', '交易', '成交']
                        },
                        // 系列
                        series: [
                            {
                                // 系列名称
                                name: '销售漏斗数据统计',
                                // 我们的图表类型
                                type: 'funnel',
                                // 左侧距离
                                left: '10%',
                                // 上侧距离
                                top: 60,
                                // 下侧距离
                                bottom: 60,
                                width: '80%',
                                min: 0,
                                max: 100,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                    fontSize: 20
                                    }
                                },
                                // 数据源(数据内容)
                                // data: [
                                //     { value: 20, name: '成交' },
                                //     { value: 60, name: '交易' },
                                //     { value: 80, name: '客户' },
                                //     { value: 100, name: '线索' }
                                // ]
                                data : saleFunnelData
                            }
                        ]
                    };
                    // 把配置好的可选项设置到我们的图表中
                    option && myChart.setOption(option);
                }
                else{
                    messageTip("网络异常","error");
                }
            });
        }
    }
}
</script>

<style scoped>
.el-row{
    text-align: center;
}
</style>